<template>
  <div class="bottom">
    <div class="outdiv">
      <div class="indiv" v-html="msg1"> </div>
      <div class="indiv" style="position:absolute;right:0;top:0;" v-html="msg2"> </div>
    </div>
    <div class="outdiv">
      <div class="indiv inhalf" v-html="msg3"> </div>
      <div class="indiv inhalf" v-html="msg4"></div>
      <div style="clear: both;"></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg1: "Ready",
      msg2: "上海瑞美电脑科技有限公司",
      msg3: "",
      msg4: "",
      msggp1: { 0: "Ready" },
      msggp2: { 0: "上海瑞美电脑科技有限公司" },
      msggp3: {},
      msggp4: {},
    };
  },
  computed: {},
  methods: {
    makeMsg(type, msg, grp, gmap) {
      let grpname = "0";
      if (grp && grp != "") grpname = "g_" + grp;
      if (type == 4) {
        //第4个位置固定留给表格行数使用， 最多只显示2个列表的行数
        if (gmap && !gmap[grpname]) {
          var keys = Object.keys(gmap);
          if (keys.length > 1) {
            delete gmap[keys[keys.length - 1]];
          }
        }
      }
      gmap[grpname] = msg;
      var sortedGmap = Object.keys(gmap).sort(function (a, b) {
        return gmap[b] - gmap[a];
      });

      let returnmsg = "";
      for (let i = 0; i < sortedGmap.length; i++) {
        if (type == 4) {
          //第4个位置固定留给表格行数使用
          let showtxt = gmap[sortedGmap[i]];
          if (showtxt) {
            if (i == 0) {
              returnmsg += "列表：" + showtxt + "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";
            } else if (i == sortedGmap.length - 1) {
              returnmsg += "列表2： " + showtxt;
            }
          }
        } else {
          returnmsg += gmap[sortedGmap[i]] + "&nbsp;&nbsp;";
        }
      }
      return returnmsg;
    },
    GetStatusName() {
      this.$tool
        .request({
          url: "/ucent/login",
          method: "post",
          data: {
            action: "statusname",
          },
        })
        .then((response) => {
          if (response.errcode == "1") {
            this.msg2 = response.sname;
            this.msggp2[0] = response.sname;
            this.msg1 = 'IP：' + response.p;
            this.msggp1[0] = 'IP：' + response.p;
          }
        });
    },
  },
  created() {

    this.$bus.$on("statumsg", (type, msg, grp) => {
      console.log("msgtype", type, msg, grp)
      switch (type) {
        case 1:
          this.msg1 = this.makeMsg(type, msg, grp, this.msggp1);
          break;
        case 2:
          this.msg2 = this.makeMsg(type, msg, grp, this.msggp2);
          break;
        case 3:

          this.msg3 = this.makeMsg(type, msg, grp, this.msggp3);
          break;
        case 4:
          {
          }
          this.msg4 = this.makeMsg(type, msg, grp, this.msggp4);
          break;
      }
    });
    this.$bus.$on("clearstatumsg", (type) => {

      switch (type) {
        case 1:
          this.msg1 = "";
          this.msggp1 = {};
          break;
        case 2:
          this.msg2 = "";
          this.msggp2 = {};
          break;
        case 3:
          this.msg3 = "";
          this.msggp3 = {};
          break;
        case 4:
          this.msg4 = "";
          this.msggp4 = {};
          break;
      }
    });
    this.GetStatusName();
  },
  beforeDestroy() {
    this.$bus.$off("statumsg");
    this.$bus.$off("clearstatumsg");
  },
};
</script>

<style scoped>
.bottom {
  position: absolute;
  bottom: 0;
  height: 25px;
  width: 100%;
  overflow: hidden;
  background-color: #ececec;
  /* border: 1px solid #ccc; */
}

.outdiv {
  width: 50%;
  height: 100%;
  display: inline-block;

  position: relative;
  overflow: hidden;
}

.indiv {
  height: 100%;
  line-height: 21px;
  padding-left: 5px;
  padding-right: 5px;
  border: 2px solid #ccc;
}

.inhalf {
  width: 50%;
  border-left: 0;
  float: left;
}
</style>
